<template>
    <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div class="grid-content ep-bg-purple-dark" />
            <h1 class="m-0">抱歉，页面未找到，<span>{{ countDown }}</span>s后自动跳转到
                <a href="javascript:;" @click="goHome">首页</a>
            </h1>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div class="grid-content ep-bg-purple-dark" />
            <div class="_404">
                <img src="../assets/img/404.png" alt="页面未找到">
            </div>
        </el-col>
    </el-row>





</template>

<script setup>
import router from '../router/index.js'
import { reactive, ref } from 'vue';
import { onMounted } from 'vue'


const countDown = ref(5)
const goHome = () => {
    router.push('/index')
}

onMounted(() => {
    var times = setInterval(() => {
        countDown.value--; //递减
        if (countDown.value <= 0) {
            router.push('/index')
        }
    }, 1000);
})
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

._404 img {
    width: 100%;
}
</style>